<template>
  <div class="EditContainer">
    <h1></h1>
    <div class="display">
      <svg
        role="img"
        xmlns="http://www.w3.org/2000/svg"
        width="32px"
        height="32px"
        viewBox="0 0 24 24"
        aria-labelledby="editIconTitle"
        stroke="#000"
        stroke-width="1"
        stroke-linecap="square"
        stroke-linejoin="miter"
        fill="none"
        color="#000"
      >
        <title id="editIconTitle">Edit</title>
        <path
          d="M18.4142136 4.41421356L19.5857864 5.58578644C20.366835 6.36683502 20.366835 7.63316498 19.5857864 8.41421356L8 20 4 20 4 16 15.5857864 4.41421356C16.366835 3.63316498 17.633165 3.63316498 18.4142136 4.41421356zM14 6L18 10"
        />
      </svg>
      <span>标签名:</span>
      <input type="text" v-model="currentRoute" :placeholder="routeName" />
      <!-- :value="route.params.para" -->
    </div>
    <div class="delete">
      <div @click="DeleteTagName">删除该标签</div>
      <div @click="changeTagName">确认修改标签标签</div>
    </div>
    <div class="delete"></div>
  </div>
</template>

<script setup lang="ts">
// 引入pinia的store
import { useTagLists } from "./../../store";
import { useRoute, useRouter } from "vue-router";
import { Ref, ref } from "vue";
// 钩子函数引入pinia的store
let store = useTagLists();
// 路由 获取路由参数
const route = useRoute();
// 路由 用于编程式导航
const router = useRouter();
// 读取传入的路由参数para
const routeName = route.params.para as string;
// input输入框的输入内容
const currentRoute: Ref<string> = ref("");

// 修改标签名称
const changeTagName = (): void => {
  // 暂存所有标签内容
  const NameList = store.Tags;
  // 暂存所有标签的名字 只有name没有active
  const tempArr = NameList.map((e: { name: string }) => e.name);
  // 输入内容的判断  不能为空 也不能和存在数据中相同的
  if (currentRoute.value === "") {
    alert("请输入内容,不要置为空!");
    // 直接return结束changeTagName函数
    return;
  }
  // 输入内容的判断  不能为空 也不能和存在数据中相同的
  if (tempArr.includes(currentRoute.value)) {
    alert("已有重复标签名,请重新输入!");
    // 直接return结束changeTagName函数
    return;
  }
  NameList.forEach((element: { name: string }) => {
    // 找出和当前路由参数中相同的 TagsList对应项并且修改那个name
    if (element.name === routeName) {
      element.name = currentRoute.value;
      alert("修改成功,返回上一级!");
      // 编程式导航 返回一级
      router.go(-1);
      return;
    }
  });
};

// 删除当前标签
const DeleteTagName = () => {
  // 暂存所有标签内容
  const NameList = store.Tags;
  NameList.forEach((element: { name: string }, index: number) => {
    if (element.name === routeName) {
      // splice方法  在第index的位置上 删除1个成员
      // Arr.splice(2,1) - 表示在Arr数组第2号索引位置向后删除1个元素
      // Arr.splice(1,2,'abc') - 表示在Arr数组第1号索引位置向后删除2个元素，并且添加一个元素 'abc'

      // splice方法
      // -------------------------------------------------------
      // const months = ["Jan", "March", "April", "June"];
      // months.splice(1, 0, "Feb");
      // // inserts at index 1
      // console.log(months);
      // // expected output: Array ["Jan", "Feb", "March", "April", "June"]

      // months.splice(4, 1, "May");
      // // replaces 1 element at index 4
      // console.log(months);
      // // expected output: Array ["Jan", "Feb", "March", "April", "May"]
      // -------------------------------------------------------

      // slice方法
      // -------------------------------------------------------
      // const animals = ["ant", "bison", "camel", "duck", "elephant"];

      // console.log(animals.slice(2));
      // // expected output: Array ["camel", "duck", "elephant"]

      // console.log(animals.slice(2, 4));
      // // expected output: Array ["camel", "duck"]

      // console.log(animals.slice(1, 5));
      // // expected output: Array ["bison", "camel", "duck", "elephant"]

      // console.log(animals.slice(-2));
      // // expected output: Array ["duck", "elephant"]

      // console.log(animals.slice(2, -1));
      // // expected output: Array ["camel", "duck"]

      // console.log(animals.slice());
      // // expected output: Array ["ant", "bison", "camel", "duck", "elephant"]
      // -------------------------------------------------------

      NameList.splice(index, 1);
      alert("删除成功,返回上一级!");
      router.go(-1);
      return;
    }
  });
};
</script>

<style scoped lang="less">
.EditContainer {
  padding-top: 20px;
  height: 86vh;
  background-color: rgb(243, 241, 241);
  .display {
    background-color: #fff;
    padding-left: 30px;
    font-size: 22px;
    height: 6vh;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    span {
      margin: 0px 10px;
    }
    input {
      border: none;
    }
  }
  .delete {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;

    div {
      margin: 15px;
      display: flex;
      border-radius: 20px;
      flex-direction: row;
      justify-content: center;
      height: 60px;
      width: 200px;
      font-size: 20px;
      line-height: 60px;
      background-color: rgb(170, 189, 195);
    }
  }
}
</style>
